<template>
	<div class="card content-box">
		<h3>字典输入组件，（可用element plus 组件的属性）</h3>
		<h4>多选</h4>
		<DictCheckbox v-model="checkbox" dict="user_status"></DictCheckbox>
		<DictCheckbox v-model="checkbox" dict="user_status" is-button></DictCheckbox>
		<h4>单选</h4>
		<DictRadio v-model="radio" dict="user_status"></DictRadio>
		<DictRadio v-model="radio" dict="user_status" is-button></DictRadio>
		<h4>下拉</h4>
		<DictSelect v-model="select" dict="user_status"></DictSelect>
		<DictSelect v-model="selectMultiple" dict="user_status" multiple></DictSelect>
		<DictSelect v-model="selectMultiple" dict="user_status" disabled placeholder="请选择111" multiple></DictSelect>
		<h3>字典展示</h3>
		<h4>tag</h4>
		<DictTag value="1" dict="user_status"></DictTag>
		<DictTag :value="['1', '2']" dict="user_status"></DictTag>
		<h4>文本</h4>
		<DictText value="1" dict="user_status"></DictText>
		<h4>tag（是否）</h4>
		<YesNo :value="true"></YesNo>
		<YesNo :value="true" yes-text="成功" no-text="失败"></YesNo>
		<h3>字典工具函数，需要在 /utils/dict/index 中注册</h3>
		<div>{{ isNormal('1') }}</div>
		<div>{{ isNormal('2') }}</div>
	</div>
</template>

<script setup lang="ts" name="dict">
import { ref } from 'vue'
import DictCheckbox from '@/components/DictCheckbox/index.vue'
import DictRadio from '@/components/DictRadio/index.vue'
import DictSelect from '@/components/DictSelect/index.vue'
import DictTag from '@/components/DictTag/index.vue'
import DictText from '@/components/DictText/index.vue'
import YesNo from '@/components/YesNo/index.vue'
import dict from '@/utils/dict/index'
// user_status 这个字典相关的工具函数，防止在页面中写 status === 1 这种魔法值
let isNormal = dict.user_status.isNormal

let checkbox = ref([])
let radio = ref('1')
let select = ref('1')
let selectMultiple = ref(['1'])
</script>

<style scoped lang="scss"></style>
